{% block sw_bulk_edit_modal %}
<sw-modal
    class="sw-bulk-edit-modal"
    :title="$tc('global.sw-bulk-edit-modal.bulkEditModalTitle', { count: itemCount }, itemCount)"
    variant="full"
    @modal-close="$emit('modal-close')"
    @edit-items="$emit('edit-items')"
>

    {% block sw_bulk_edit_modal_grid %}
    <sw-data-grid
        ref="bulkEditGrid"
        :identifier="identifier"
        :data-source="paginateRecords"
        :columns="bulkGridEditColumns"
        :pre-selection="selection"
        :show-selection="true"
        :show-actions="false"
        :skeleton-item-amount="limit"
        @selection-change="updateBulkEditSelection"
    >

        {% block sw_bulk_edit_modal_grid_custom_slot %}
        <template
            v-for="(_, slot) in getSlots"
            #[slot]="props"
        >
            <slot
                :name="slot"
                v-bind="props"
            ></slot>
        </template>
        {% endblock %}

        {% block sw_bulk_edit_modal_list_pagination %}
        <template #pagination>
            <sw-pagination
                v-bind="{ page, limit, steps }"
                :total="records.length"
                :auto-hide="false"
                :total-visible="7"
                @page-change="paginate"
            />
        </template>
        {% endblock %}
    </sw-data-grid>
    {% endblock %}

    {% block sw_bulk_edit_modal_grid_footer %}
    <template #modal-footer>
        <slot name="sw-bulk-edit-modal-cancel">
            <mt-button
                size="small"
                variant="secondary"
                @click="$emit('modal-close')"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
        </slot>

        <slot name="sw-bulk-edit-modal-confirm">
            <mt-button
                variant="primary"
                size="small"
                @click="editItems"
            >
                {{ $tc('global.sw-bulk-edit-modal.startBulkEdit') }}
            </mt-button>
        </slot>
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
